<!-- HTML5 Playground
File:	storage.html
Author: Nagendra U M
 -->
<!DOCTYPE html>
<html manifest="html5playground.appcache">
<head>
	<meta charset="UTF-8">
	<link href="../theme/css/main.css" type="text/css" rel="stylesheet">
	<link href="../theme/css/storage.css" type="text/css" rel="stylesheet">
	<script src="../js/thirdparty/modernizr.min.js" type="text/javascript"></script>
	<script src="../js/thirdparty/jquery-1.7.2.min.js"></script>
	<script src="../js/main.js" type="text/javascript" ></script>
	<script src="../js/storage.js" type="text/javascript" ></script>
	<title>HTML5 Playground - Nagendra U M - Offline/Storage Demo</title>
</head>
<body onload="thingsToDoOnload();">
	<header class="main-header">
		<hgroup>
			<table style="width: 100%">
				<tr>
					<td style="width: 15%;"><img src="../theme/images/html5logo.png"></td>
					<td style="width: 85%; text-align: center;">
						<h1>HTML5 Playground</h1>
						<h3>Offline/Storage Features</h3>
					</td>
				</tr>
			</table>
		</hgroup>
	</header>
	<nav>
		<ul>
			<li><a href="storage.html">Offline/Storage</a></li>
			<li><a href="communication.html">Realtime/Communication</a></li>
			<li><a href="hardware.html">File/Hardware Access</a></li>
			<li><a href="semantics.html">Semantics and Markup</a></li>
			<li><a href="multimedia.html">Graphics/Multimedia</a></li>
			<li><a href="misc.html">Misc.</a></li>
		</ul>
	</nav>
	<section id="localStorageDemo">
		<article id="localStorage">
			<table class="full-width-table">
				<tr>
					<td>
						<header>
							<h2>LocalStorage API</h2>
						</header>
					</td>
					<td>
						<header>
							<h2>SessionStorage API</h2>
						</header>
					</td>
				</tr>
				<tr>
					<td>
						<div id="container">
							<div id="stickyNote" class="paper">
								<span class="stickyTitle">Sticky Note - TODO</span>
								<ul id="lines" contenteditable="true" onblur="persistTodoList()">
									<li>This is also an example of HTML5 'contentEditable' feature</li>
									<li>Click and edit items to store them in your TODO list</li>
									<!-- sticky note items go here -->
								</ul>
								<div class="left-shadow"></div>
								<div class="right-shadow"></div>
							</div>
						</div>
					</td>
					<td>
						<div id="scratchpad" contenteditable="true" onblur = "persistScratchpad()">
							/**************************** <br/>
							* SESSIONSTORAGE SCRATCHPAD	* <br/>
							****************************/ <br/>
							<br/>
							Edit text here which will be saved for this session
							using the HTML5 sessionStorage API. <br/>
							<br/>
							This is also an example of HTML5 'contentEditable' feature<br/>
							<!-- scratchpad contents go here -->
						</div>
					</td>
				</tr>
			</table>
		</article>
	</section>
	<section id="html5DatabaseDemo">
		<article id="webSQL">
			<header>
				<h2>Web SQL Database</h2>
			</header>
			<table class="full-width-table">
				<tr>
					<td>
						<input type="button" id="createEmpTableButton" onclick="createEmployeeTable()" value="Create Employee Table" class = "styled-button"/>
						<br/>
						<table id ="employeeDetailsForm">
							<tr>
								<td>
									<label for="empId">Employee ID:</label>
								</td>
								<td>
									<input type="text" id="empId" title="empId" size="15" maxlength="3"/>
								</td>
							</tr>
							<tr>
								<td>
									<label for="empName">Employee Name:</label>
								</td>
								<td>
									<input type="text" id="empName" title="empName" size="15" maxlength="15"/>
								</td>
							</tr>
							<tr>
								<td>
									<label for="empId">Employee Salary:</label>
								</td>
								<td>
									<input type="text" id="empSalary" title="empSalary" size="15" maxlength="6"/>
								</td>
							</tr>
						</table>
						<input type="button" id="addEmployeeButton" onclick="addEmployee()" value="Add Employee" class = "styled-button" />
						<input type="button" id="dropEmpTableButton" onclick="dropEmployeeTable()" value="Drop Employee Table" class = "styled-button" />
					</td>
					<td style="vertical-align: top;">
						<table id ="employeeTable">
							<tr>
								<th class="employeeTableHeader">Employee ID</th>
								<th class="employeeTableHeader">Employee Name</th>
								<th class="employeeTableHeader">Salary</th>
							</tr>
							<!-- Table will be populated dynamically from Web SQL DB -->
						</table>
					</td>
				</tr>
			</table>
		</article>
	</section>
	<section id="offlineAPIsDemo">
		<article id="offlineAPIs">
			<header>
				<h2>ApplicationCache + Online/Offline Detection</h2>
			</header>
		</article>
	</section>
	<footer>
		<p>&#169; 2012 <a href="http://gplus.to/umnagendra">Nagendra U M</a></p>
		<img alt="Powered by HTML5" src="../theme/images/html5badge.png" title="Powered by HTML5">
	</footer>
</body>
</html>